<!doctype html>
<html><head>
	<!-- Basic Page Needs -->
        <meta charset="utf-8">
        <title>Appcorner - Page element</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net">

   
    <!-- Mobile Specific Metas-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta content="telephone=no" name="format-detection">
    
    <!-- Fonts -->
        <!-- SourceSansPro -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
        <!-- Icomoon -->
        <link href="css/icomoon.css" rel="stylesheet" />
        <!--  Font awesome 4-->
        <link href="css/font-awesome.css" rel="stylesheet" />
    
    <!-- Stylesheets -->
    	
        <!-- Bootstrap 3 -->
    	  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
        <!-- Mobile navigation menu-->
        <link href="css/gozha-nav.css" rel="stylesheet" />

        <!-- Custom -->
        <link href="css/base.css?v=1" rel="stylesheet" />
        <link href="css/style.css?v=1" rel="stylesheet" /> 
		
		<!-- Basic JavaScript-->
		<!-- Modernizr -->
		<script src="js/modernizr.custom.05768.js"></script>
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script> 
		<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>		
    <![endif]-->
 

</head>

<body class='page-elem'>
    <div class='wrapper'>
        <header class='header'>
            <div class='container'>
                <p class='call-number'>You can just call us <span>+1-888-555-5555</span></p>
                <!-- social icon -->
                <ul class='social-icon pull-right'>
                    <li><a href="#"><i class='icon-instagram'></i></a></li>
                    <li><a href="#"><i class='icon-dribbble'></i></a></li>
                    <li><a href="#"><i class='icon-tumblr'></i></a></li>
                    <li><a href="#"><i class='icon-linkedin'></i></a></li>
                    <li><a href="#"><i class='icon-pinterest'></i></a></li>
                    <li><a href="#"><i class='icon-googleplus'></i></a></li>
                    <li><a href="#"><i class='icon-facebook'></i></a></li>
                    <li><a href="#"><i class='icon-twitter'></i></a></li>
                </ul><!-- end of social icon list -->

                <div class='top-navigation'>
                  <div class="navigation-front">
                    <a href="index.html" class='logo'>AppCorner</a>
                    <div id="navigation-box">
                        <a href="#" id="navigation-toggle">
                            <span class="menu-icon"></span>
                        </a> 
                        <ul id="navigation" class="hover-link">
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Home'>Home</a>
                                <ul>
                                    <li><a href="homepage1.html">Revolution Slider</a></li>
                                    <li><a href="homepage2.html">OneByOne Slider</a></li>
                                    <li><a href="homepage3.html">BxSlider</a></li>
                                    <li><a href="homepage4.html">FlexSlider</a></li>
                                    <li><a href="full-width-slider.html">Full Width</a></li>
                                    <li><a href="index.html">Video Slider</a></li>

                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Pages' class='active'>Pages</a>
                                <ul>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="single-employee.html">Single employee</a></li>
                                    <li><a href="service.html">Services</a></li>
                                    <li><a href="single-service.html">Single service</a></li>
                                    <li><a href="price.html">Price</a></li>
                                    <li><a href="page-element.html">Page elements</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                    <li><a href="icon-font-1.html">Icons - Font awesome</a></li>
                                    <li><a href="icon-font-2.html">Icons - Icomoon</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="support.html">Support</a></li>
                                    <li><a href="coming-soon.html">Coming soon</a></li>
                                    <li><a href="404.html">404 error</a></li>

                                </ul>
                            </li>

                            <li class="visible-lg">
                               <span class="sub-nav-toggle plus"></span>
                               <a href="#" data-hover='Mega Menu'>Mega Menu</a>
                               <ul class="mega-menu">
                                  <li class="col-md-6">
                                    <div class="mega-menu-text">
                                        <h4>About Us</h4>
                                        <div class="image-wrap">
                                           <img alt='' src="http://placehold.it/420x420">
                                        </div>
                                        <div>
                                            <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. 
                                                <br>
                                                <br>
                                            Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>        
                                        </div>
                                      </div>
                                  </li>
                                  <li class="col-md-6">
                                    <div class="mega-menu-item">
                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Pages</h4></li>
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="single-employee.html">Single employee</a></li>
                                        <li><a href="service.html">Services</a></li>
                                        <li><a href="single-service.html">Single service</a></li>
                                        <li><a href="price.html">Price</a></li>
                                        <li><a href="page-element.html">Page elements</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="empty"><div></div></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icon-font-2.html">Icons</a></li>
                                        <li><a href="coming-soon.html">Coming soon</a></li>
                                        <li><a href="404.html">404 error</a></li>
                                        <li><a href="login.html">Login</a></li>
                                        <li><a href="support.html">Support</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Gallery</h4></li>
                                        <li><a href="gallery-random.html">Random</a></li>
                                        <li><a href="gallery-three-columns.html">3 columns</a></li>
                                        <li><a href="gallery-two-columns.html">2 columns</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Blog</h4></li>
                                        <li><a href="blog-style-one.html">Style 1</a></li>
                                        <li><a href="blog-style-two.html">Style 2</a></li>
                                        <li><a href="blog-style-three.html">Style 3</a></li>
                                        <li><a href="single-post.html">Post</a></li>
                                        <li><a href="single-post-two.html">Post style 2</a></li>
                                      </ul>
                                      </div>
                                  </li>
                               </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="gallery-random.html" data-hover='Gallery'>Gallery</a>
                                <ul>
                                    <li><a href="gallery-random.html">Gallery random</a></li>
                                    <li><a href="gallery-three-columns.html">Gallery 3 columns</a></li>
                                    <li><a href="gallery-two-columns.html">Gallery 2 columns</a></li>
                                    <li><a href="gallery-three-columns-iso.html">Gallery 3 columns sorted</a></li>
                                    <li><a href="gallery-two-columns-iso.html">Gallery 2 columns sorted</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="blog-style-one.html" data-hover='Blog'>Blog</a>
                                <ul>
                                    <li><a href="blog-style-one.html">Blog style 1</a></li>
                                    <li><a href="blog-style-two.html">Blog style 2</a></li>
                                    <li><a href="blog-style-three.html">Blog style 3</a></li>
                                    <li><a href="blog-audio.html">Audio blog</a></li>
                                    <li><a href="blog-video.html">Video blog</a></li>
                                    <li><a href="single-post.html">Single post</a></li>
                                    <li><a href="single-post-two.html">Single post style 2</a></li>
                                </ul>
                            </li>

                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="shop-sidebar.html" data-hover='Shop'>Shop</a>
                                <ul>
                                    <li><a href="shop-sidebar.html">Shop with sidebar</a></li>
                                    <li><a href="shop-full.html">Shop fullwidth</a></li>
                                    <li><a href="single-product-sidebar.html">Single product sidebar</a></li>
                                    <li><a href="single-product-full.html">Single product fullwidth</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="shopping-cart.html">Shopping cart</a></li>
                                </ul>
                            </li>
                            
                            <li><a href="contact.html" data-hover='Contact'>Contact</a></li>
                        </ul>
                  </div>
                </div>
              </div>

                <div class='main-zone'>
                  <div class="corner"></div>
                  <div class='corner-line'></div>
                    
                   <div class='current-page'>
                      <hr class="top-devider" />
                        <h1>Page elements</h1>
                        <ol class="breadcrumb">
                          <li><a href="index.html">home</a></li>
                          <li class="active">page elements</li>
                        </ol>
                   </div>
                </div>
            </div>
        </header>

        <section class='container waypoint' data-animate-up="nav-strict" data-animate-down="nav-show">
            
            <div class='col-md-12 col-lg-12'>
              <h2>accordion</h2>
            </div>

            <!-- Firts type accordion-->
            <div class='accordion-first col-md-6 col-lg-6'>
                <div class="panel-group" id="accordion">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseOne" class="panel-collapse collapse in">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->
                  
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class='collapsed'>
                            <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                           </div>
                          Aenean sed neque rhoncus. 
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseTwo" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->
                  
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class='collapsed'>
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Sed adipiscing vel felis et placerat.
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseThree" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->
                  
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class='collapsed'>
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseFour" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                     </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->

                </div>
            </div><!-- end first accordion-->

            <!-- Second type accordion-->
            <div class='accordion-second col-md-6 col-lg-6'>
                 <div class="panel-group" id="accordion-two">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion-two" href="#collapseFirst">
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        </a>
                      </h4>
                    </div> <!-- end panel heading-->
                    <div id="collapseFirst" class="panel-collapse collapse in">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->
                  
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion-two" href="#collapseSecond" class='collapsed'>
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Aenean sed neque rhoncus. 
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseSecond" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->
                  
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion-two" href="#collapseThird" class='collapsed'>
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Sed adipiscing vel felis et placerat.
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseThird" class="panel-collapse collapse">
                      <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->

              </div><!-- end panel group-->
            </div> <!-- end second accordion-->

        </section> <!-- end section with accordion-->

        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2 class='lower'>alerts</h2>
            </div>

            <div class='col-md-6 col-lg-6 alertgroup-first'>
              <div class="alert alert-success">
                <span class='icon-flag'></span>
                Success! Notification goes here
                <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
              </div>
              <div class="alert alert-warning">
                <span class='icon-bell'></span>
                Warning! Notification goes here
                <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
              </div>
            </div><!-- end alerts holder -->

            <div class='col-md-6 col-lg-6 alertgroup-second'>
                <div class="alert alert-danger">
                <span class='icon-warning'></span>
                Danger! Notification goes here
                <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
              </div>
              <div class="alert alert-info">
                <span class='icon-info2'></span>
                Information! Notification goes here! Notification goes here
                <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
              </div>
              
            </div><!-- end alerts holder -->
        </section> <!-- end section with alerts-->

        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2>blockquote</h2>
            </div>
              <div class='col-md-6 col-lg-6'>
                <blockquote class='quote-first'>
                  <p> Duis condimentum lorem posuere lorem rhoncus eget pulvinar erat sollicitudin. Nullam molestie pulvinar nulla, in gravida sem vehicula at.</p>
                  <p class='author'>- John Doe</p>
                </blockquote>
              </div><!-- end first quote-->

              <div class='col-md-6 col-lg-6'>
                <blockquote class='curly-quote quote-second'>
                  <p> Vivamus iaculis est in sem cursus, et facilisis diam cursus. Mauris vehicula suscipit lorem, a dapibus diam faucibus vitae. Mauris eget adipiscing felis. Integer sit amet neque risus. Quisque porttitor malesuada hendrerit.</p>
                  <p class='author pull-right'>- John Doe</p>
                </blockquote>
              </div><!-- end second quote-->
            
        </section> <!-- end section with blockquote-->

        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2 class='lower'>buttons</h2>
            </div>

            <div class='col-md-6 col-lg-6'>
              <button type="button" class="btn btn-danger btn-lg icon-circled-right btn-animate">purchase</button>
              <button type="button" class="btn btn-success btn-lg icon-circled-right btn-animate">purchase</button>
              <button type="button" class="btn btn-info btn-lg icon-circled-right btn-animate">purchase</button>
            </div><!-- end large buttons-->
            <div class='col-md-6 col-lg-6 small-buttons'>
              <button type="button" class="btn btn-danger btn-sm">button</button>
              <button type="button" class="btn btn-success btn-sm">button</button>
              <button type="button" class="btn btn-info btn-sm">button</button>
            </div><!-- end small with buttons-->

        </section> <!-- end section with buttons-->

        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2>dropcaps</h2>
            </div>

            <div class='col-md-6 col-lg-6'>
              <p class='dropcaps1'>Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. Mauris gravida ipsum vitae libero molestie eget dignissim ipsum egestas. Quisque in eros id velit molestie placerat a ut arcu. Etiam consequat, turpis ac commodo rhoncus, justo enim consequat tortor, vitae interdum odio tellus at sem.</p>
            </div>
            <div class='col-md-6 col-lg-6'>
              <p class='dropcaps2'>Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. Mauris gravida ipsum vitae libero molestie eget dignissim ipsum egestas. Quisque in eros id velit molestie placerat a ut arcu. Etiam consequat, turpis ac commodo rhoncus, justo enim consequat tortor, vitae interdum odio tellus at sem.Mauris gravida ipsum vitae libero molestie eget dignissim ipsum egestas.</p>
            </div>

        </section> <!-- end section with dropcaps-->

        <section class='container lists'>
            <div class='col-md-12 col-lg-12'>
              <h2 class='lower'>lists</h2>
            </div>

            <div class='col-md-12 col-lg-12'>
              <div class="col-md-4 col-lg-4">
                <ol class='list-wrap'> 
                  <li><span>Quisque ac porttitor massa.</span></li>
                  <li><span>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</span></li>
                  <li><span>In eros sem, malesuada ut dictum eget, volutpat at sem.</span> </li>
                  <li><span>Pellentesque porttitor suscipit laoreet.</span></li>
                </ol>
              </div>

              <ul class='col-md-4 col-lg-4 style-one'> 
                <li>Quisque ac porttitor massa.</li>
                <li>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</li>
                <li>In eros sem, malesuada ut dictum eget, volutpat at sem. </li>
                <li>Pellentesque porttitor suscipit laoreet.</li>
              </ul>

              <ul class='col-md-4 col-lg-4 style-two'> 
                <li>Quisque ac porttitor massa.</li>
                <li>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</li>
                <li>In eros sem, malesuada ut dictum eget, volutpat at sem. </li>
                <li>Pellentesque porttitor suscipit laoreet.</li>
              </ul>
            </div>

              <div class='clearfix'></div>
              <div class='empty-block'></div>

            <div class='col-md-12 col-lg-12'>
              <ul class='col-md-4 col-lg-4 style-three'> 
                <li>Quisque ac porttitor massa.</li>
                <li>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</li>
                <li>In eros sem, malesuada ut dictum eget, volutpat at sem. </li>
                <li>Pellentesque porttitor suscipit laoreet.</li>
              </ul>

              <ul class='col-md-4 col-lg-4 style-four'> 
                <li>Quisque ac porttitor massa.</li>
                <li>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</li>
                <li>In eros sem, malesuada ut dictum eget, volutpat at sem. </li>
                <li>Pellentesque porttitor suscipit laoreet.</li>
              </ul>

              <ul class='col-md-4 col-lg-4 style-five'> 
                <li>Quisque ac porttitor massa.</li>
                <li>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</li>
                <li>In eros sem, malesuada ut dictum eget, volutpat at sem. </li>
                <li>Pellentesque porttitor suscipit laoreet.</li>
              </ul>
            </div>
        </section> <!-- end section with lists-->


        <div class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2 class='lower'>Promoboxes</h2>
            </div>
        </div>
        <div  class='promobox-one'>
          <div class='container'>
            <p class='promo'>Check appcorner here </p>
            <hr />
            <button type="button" class="btn btn-success btn-lg promo-btn icon-circled-right btn-animate">live demo</button>
          </div>
        </div>
        <div class='container'>
          <div class='promobox-two'>
            <p class='promo'>Check appcorner here </p>
            <hr />
            <button type="button" class="btn btn-success btn-lg promo-btn icon-circled-right btn-animate">live demo</button>
          </div>

           <div class='col-md-6 col-lg-6 promobox-1'>
              <div class='promobox-three '>
                <p class='promo'>AppCorner</p>
                <p class='decript'>app which suits your needs</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. Mauris gravida ipsum vitae libero molestie eget dignissim ipsum egestas. Quisque in eros id velit molestie placerat a ut arcu. </p>
                <button type="button" class="btn btn-danger btn-lg pull-left btn-puchase icon-circled-right btn-animate">purchase</button>
              </div>
           </div>

           <div class='col-md-6 col-lg-6 promobox-2'>
              <div class='promobox-four'>
                <p class='promo'>Great opportunities</p>
                <p class='decript'>with appcorner</p>
                <button type="button" class="btn btn-success btn-lg icon-circled-right btn-animate"></i>purchase</button>
              </div>
           </div>

        </div> <!-- end section with promoboxes-->

        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2 class='lower'>table</h2>
            </div>

             <div class='col-md-12 col-lg-12'>
            <table class="table table-bordered">
              <colgroup class="col-width">
              <colgroup class="col-width">
              <colgroup class="col-width">
              <colgroup class="col-width">
            
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                    <th>Header 4</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                  <td>Praesent interdum rutrum facilisis</td>
                  <td>123</td>
                  <td>100 Gb</td>
                  <td>$ 123.00</td>
                </tr>
                <tr>
                  <td>Lorem ipsum dolor sit amet</td>
                  <td>645</td>
                  <td>200 Gb</td>
                  <td>$ 200.00</td>
                </tr>
                <tr>
                  <td>Aliquam at ante orci</td>
                  <td>9456</td>
                  <td>300 Gb</td>
                  <td>$ 123.00</td>
                </tr>
                <tr>
                  <td>Donec rhoncus</td>
                  <td>84</td>
                  <td>450 Gb</td>
                  <td>$ 300.00</td>
                </tr>
                <tr>
                  <td>Praesent interdum rutrum facilisis</td>
                  <td>27</td>
                  <td>600 Gb</td>
                  <td>$ 450.00</td>
                </tr>
            </tbody>
           </table>
         </div>
        </section> <!-- end section with table-->

        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2>Tabs</h2>
            </div>

            <div class='col-md-6 col-lg-6 tabcontainer-one'>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" id="firstTab">
                  <li class='active popupar'><a href="#popular" data-toggle="tab">Popular</a></li>
                  <li class='recent'><a href="#recent" data-toggle="tab">Recent</a></li>
                  <li class='all'><a href="#all" data-toggle="tab">ALL</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                  <div class="tab-pane active" id="popular">Sed tincidunt libero sit amet atnte molestie eu faucibus ante auctor. In a diam lorem, quis ornare arcu. Nunc vel turpis sit amet elit iaculis sollicitudin a nec neque. 
                  <br/>
                  <br/>
                  Aliquam adipiscing, ligula vel congue cursus, libero nibh ullamcorper ipsum, non blandit mauris justo nec massa.</div>
                  <div class="tab-pane" id="recent">Fusce nec libero odio. Nam quis cursus nisi. Nam adipiscing dictum ante. Nam adipiscing dictum ante. Aenean egestas felis eu lacus elementum, eget congue lectus mattis.
                  <br/>
                  <br/>
                  Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem.</div>
                  <div class="tab-pane" id="all">Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                  <br/>
                  <br/>
                  Fusce nec libero odio. Nam quis cursus nisi. Nam adipiscing dictum ante. Nam adipiscing dictum ante. Aenean egestas felis eu lacus elementum, eget congue lectus mattis.</div>
                </div>
            </div>

            <div class='col-md-6 col-lg-6 tabcontainer-two'>
              <!-- Nav tabs -->
                <ul class="nav nav-tabs" id="secondTab">
                  <li><a href="#pop" data-toggle="tab">Popular</a></li>
                  <li class='active'><a href="#rec" data-toggle="tab">Recent</a></li>
                  <li><a href="#comments" data-toggle="tab">Comments</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                  <div class="tab-pane active" id="pop">Sed tincidunt libero sit amet atnte molestie eu faucibus ante auctor. In a diam lorem, quis ornare arcu. Nunc vel turpis sit amet elit iaculis sollicitudin a nec neque. 
                  <br/>
                  <br/>
                  Aliquam adipiscing, ligula vel congue cursus, libero nibh ullamcorper ipsum, non blandit mauris justo nec massa.</div>
                  <div class="tab-pane" id="rec">Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                  <br/>
                  <br/>
                  Fusce nec libero odio. Nam quis cursus nisi. Nam adipiscing dictum ante. Nam adipiscing dictum ante. Aenean egestas felis eu lacus elementum, eget congue lectus mattis.</div>
                  <div class="tab-pane" id="comments">Fusce nec libero odio. Nam quis cursus nisi. Nam adipiscing dictum ante. Nam adipiscing dictum ante. Aenean egestas felis eu lacus elementum, eget congue lectus mattis.
                  <br/>
                  <br/>
                  Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem.</div>
                </div>
            </div>

        </section> <!-- end section with tabs-->
        
        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2 class='lower'>testimonials</h2>
            </div>

            <div class='col-md-4 col-lg-4 testimonial-wrap-1'>
              <a href='#' class='testimonials-first'>
                <div class='image-holder'>
                  <img alt='' src='http://placehold.it/60x60'>
                </div> 
                <p class='name'>Jane MacFerson</p>
                <p class='organization'>themeforest.net</p>
                <p class='message'>“Fusce nec libero odio. Nam quis cursus nisi. Nam adipiscing dictum ante. Nam adipiscing dictum ante. Sed tincidunt libero sit amet ante molestie eu.”</p>
              </a>
            </div>
            <div class='col-md-4 col-lg-4 testimonial-wrap-2'>
              <div class='testimonials-second'>
                <div class='image-holder'>
                  <img alt='' src='http://placehold.it/60x60'>
                </div> 
                <p class='name'>Melin Stone</p>
                <p class='organization'>Themeforest, CEO</p>
                <p class='message'>“Fusce nec libero odio. Nam quis cursus nisi. Nam adipiscing dictum ante. Nam adipiscing dictum ante. Sed tincidunt libero sit amet ante molestie eu.”</p>
              </div>
            </div>
            <div class='col-md-4 col-lg-4 testimonial-wrap-3'>
              <div class='testimonials-third'>
                 <p class='message'>“Fusce nec libero odio. Nam quis cursus nisi. Nam adipiscing dictum ante. Nam adipiscing dictum ante. Sed tincidunt libero sit amet ante molestie eu.”</p>
                 <p class='name'>John Doe, Themeforest</p>
                 <span class='icon-user'><i class='dotted'></i></span>
               </div>
            </div>

        </section> <!-- end section with testimonials-->


        <section class='container'>
            <div class='col-md-12 col-lg-12'>
              <h2>tooltips</h2>
            </div>
            <div class='hover-links'>
              <a href="#" class='details-link tooltip-one' data-toggle="tooltip" data-placement="top" title="dapibus nec">Hover over me</a>
              <a href="#" class='details-link tooltip-two' data-toggle="tooltip" data-placement="top" title="dapibus nec">Hover over me</a>
              <a href="#" class='details-link tooltip-three' data-toggle="tooltip" data-placement="top" title="dapibus nec">Hover over me</a>
            </div>
        </section> <!-- end section with tooltips-->
        
        <footer class='footer'>
            <div class='container'>
                <div class='col-sm-8 col-md-8 col-lg-8'>
                    <h2>Contact info</h2>
                    <p class="footer-info">Vivamus vel lacus eu nunc vehicula ultricies vel vulputate dui. Mauris vehicula mollis mi. Quisque aliquam porta magna, at bibendum magna tempor eget. Donec consequat ipsum in nibh consequat id suscipit libero bibendum. Sed elementum imperdiet magna, convallis dapibus turpis ultricies eu.</p>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-location'></i>Address</h4>
                        <p>V101 West Street, New
                        <br/> 
                        York, NY 12345</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mail'></i>Email</h4>
                        <p>
                        appcorner@gmail.com
                        <br/> 
                        help@appcorner.com</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mobile'></i>Phone</h4>
                        <p>+ 44 1225 324 980
                        <br/> 
                        + 44 1225 324 980</p>
                    </div>
                   
                    <div class='col-sm-12 col-md-12 col-lg-12'>
                        <ul class='social-icon pull-left'>
                            <li><a href="#"><i class='icon-instagram'></i></a></li>
                            <li><a href="#"><i class='icon-dribbble'></i></a></li>
                            <li><a href="#"><i class='icon-tumblr'></i></a></li>
                            <li><a href="#"><i class='icon-linkedin'></i></a></li>
                            <li><a href="#"><i class='icon-pinterest'></i></a></li>
                            <li><a href="#"><i class='icon-googleplus'></i></a></li>
                            <li><a href="#"><i class='icon-facebook'></i></a></li>
                            <li><a href="#"><i class='icon-twitter'></i></a></li>
                        </ul>
                    </div>
                </div>

                <div class='col-sm-4 col-md-4 col-lg-4 mobile-clear'>
                    <h2>Drop us a line</h2>
                    <!-- contact form inputs-->
                    <form id="contact-form" novalidate="" name="contact-form" method="post" >
                        <input type='email' name='user-email' placeholder='Email'>
                        <textarea name="user-message" placeholder="Message"></textarea>
                        <button type="submit" class='btn btn-large btn-success btn-form icon-circled-right btn-animate'>submit</button>
                    </form><!-- end contact form inputs -->
                </div>

                <div class='clearfix'></div>
                <div class='container devider'></div>

                <p class='copy'>© Appcorner, 2013. All rights reserved. Done by Olia Gozha</p>

            </div>
        </footer>

    </div>

	<!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
        <!-- Mobile navigation menu-->
        <script src="js/jquery.mobile.menu.js"></script>
        <!-- Event that will trigger when the element is scrolled in to the viewport.--> 
        <script type="text/javascript" src="js/jquery.inview.js"></script>
         <!-- Form -->
        <script src="js/jquery.form.js"></script>
        <!-- Waypoint -->
        <script src="js/waypoints.min.js"></script>


        <!-- Custom -->
        <script src="js/custom.js"></script>

        		
		<script type="text/javascript">
        $(document).ready(function() {
            initElement();
        });
		</script>

</body>
</html>
